<template>
  <div class="q-px-md text-panda-text-dark">
    <div class="line-height-32px bg-panda-dark-dark" style="position: relative;width:120%;left: -16px ">
      <q-btn icon="close" size="sm" @click="abort_match_edit" style="width: 30px;"/>&nbsp;
      <span>对阵管理 &nbsp; {{compute_table_item_show_name(editing_obj,'','homeTeamNames')  }} vs {{compute_table_item_show_name(editing_obj,'','awayTeamNames') }}  </span>
    </div>

    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">账务时间</div>
      <div class="float-left text-panda-text-light">2019年6月11日</div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">比赛时间</div>
      <div class="float-left text-panda-text-light">{{ format_date(editing_obj.beginTime)}}</div>
    </div>
    <div class="flex">
      <div class="float-left panda-edit-component-lable">联赛级别</div>
      <div class="float-left text-panda-text-light">
        <div>
          {{ compute_tournamentLevel(editing_obj.tournamentLevel) }}
          <span class="q-mx-sm panda-btn-table-handle" @click="go_to_edit_resource_by_id">编辑</span>
        </div>
        <div>{{editing_obj.standardTournamentId}}</div>
      </div>
    </div>

    <div class="flex line-height-36px">
      <div class="float-left line-height-36px panda-edit-component-lable">联赛名称</div>
      <div class="float-left line-height-36px text-panda-text-light">{{ compute_table_item_show_name(editing_obj,'', 'leagueName')}}
        <span class="q-mx-sm panda-btn-table-handle" @click="go_to_edit_resource_by_id">编辑</span>
      </div>
    </div>

    <div class="flex">
      <div class="float-left panda-edit-component-lable">球对对阵</div>
      <div class="float-left text-panda-text-light" style="    min-width: 180px;">
        <div>
          {{ compute_table_item_show_name(editing_obj,'','homeTeamNames')  }}
          <span class="q-mx-sm panda-btn-table-handle">编辑</span>
        </div>
        <div class>{{editing_obj.homeTeamId}}</div>
        <div class="row q-my-md">
          <div class="col-7">
            <div>
              <img
                :src="compute_image_src(editing_obj.picurl) "
                class="border-radius-10px"
                alt
                width="70px"
                height="70px"
              />
            </div>

            <div class="inline-block text-panda-text-light text-center" style="    margin-left: 19px;">70*70</div>
          </div>

          <div class="col-5 text-right" style="padding-top: 20px;">
            <div>
              <img
               :src="compute_image_src(editing_obj.picurl) "
                class="border-radius-10px"
                alt
                width="50px"
                height="50px"
              />
            </div>

            <div class="inline-block text-panda-text-light text-center" style=" width:50px;">50*50</div>
          </div>
        </div>
      </div>
      <div class="q-mx-lg">VS</div>
      <div class="float-left text-panda-text-light" style="    min-width: 180px;">
        <div>
          {{compute_table_item_show_name(editing_obj,'','awayTeamNames') }}   
          <span class="q-mx-sm panda-btn-table-handle">编辑</span>
        </div>
        <div>{{editing_obj.awayTeamId}}</div>
        <div class="row q-my-md">
          <div class="col-7">
            <img
             :src="compute_image_src(editing_obj.picurl) "
              class="border-radius-10px"
              alt
              width="70px"
              height="70px"
            />
            <div class="text-panda-text-light" style="    margin-left: 19px;">70*70</div>
          </div>
          <div class="col-5 text-right" style=" padding-top: 20px;">
            <img
          :src="compute_image_src(editing_obj.picurl) "
              class="border-radius-10px"
              alt
              width="50px"
              height="50px"
            />
            <div class="text-panda-text-light" style="  margin-right: 9px;">50*50</div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">比赛场地</div>
      <div class="float-left text-panda-text-light">{{match_address}}</div>
    </div>

    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">两队距离</div>
      <div class="float-left text-panda-text-light">100KM</div>
    </div>

    <div class="row q-mt-lg q-mt-lg justify-start q-gutter-x-sm">
      <span class="panda-edit-component-lable"></span>
      <q-btn class="panda-btn-light-dense" style="width: 80px;height:24px;" @click="submit_match_edit" label="保存并应用" />
      <q-btn class="panda-btn-dark-dense" style="width: 80px;height:24px;" @click="reset_match_edit" label="重置" />
    </div>
  </div>
</template>

<style>
</style>

<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import matchManage from "src/mixins/pages/match/matchManage.js"
import matchmixin from "src/mixins/pages/match/match.js"
// import languagemixins from 'src/mixins/language/alllanguage.js'

export default {
  // 对应 对阵管理 中间部分 模块
  mixins: [...mixins, matchManage, matchmixin],
  props: {
    editing_obj: "",
  },
  data() {
    return {
      editing_obj_id: "",
      match_address: "开发排期中",
      editing_obj_backup:{}
    };
  },
  watch: {
    editing_obj(val) {  
      this.editing_obj_backup= this.$lodash.cloneDeep( val)
      this.get_match_info();
    }
  },
  created() {
    this.get_match_info();
  },
  methods: {
    close_match_edit() {
      this.$store.dispatch("set_breadcrumbsPart4", []);
      this.$router.push({
        name: "match_manage"
      });
    },
    reset_match_edit(){

    },
    get_match_info() {
      // 获取详情
      this.editing_obj_id = this.editing_obj.id;
    },
    submit_match_edit() {
      let params = {
        match_address: this.match_address
      };
      Object.assign(params, this.editing_obj)
      api_match
        .post_matchManager_modify(params)
        .then(res => {
          this.alert_message(res);
          let code = this.$lodash.get(res, "data.code");

          if (code == 200) {
            // 通知刷新
            this.$emit("minilist_need_refresh", 1, this.editing_obj_id);
            this.$nextTick(() => {
              this.$emit("minilist_need_refresh", 0);
            });
          }
        });
    },
    reset_match_edit(){
      
    },

    abort_match_edit() {
      this.$emit("close");
      this.set_use_router_cache(1);
      this.set_breadcrumbsPart4([]);
    },
    // 传入关联id跳转
    go_to_edit_resource_by_id () {
        this.$router.push({
          name: "match_resource_edit",
          query: {
            editing_obj_id: this.editing_obj.standardTournamentId
        }
      });
    }
  }
};
</script>
